<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件使用中的细节点</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<!--<table>
				<tbody>
					<tr is="row"></row>
					<tr is="row"></row>
					<tr is="row"></row>
				</tbody>
			</table>
			<div ref="hello" 
				 @click="handlerClick">
				 hello world
			</div>-->
			<counter ref="one" @change="handlerChange"></counter>
			<counter ref="two" @change="handlerChange"></counter>
			{{total}}
		</div>
		<script>
			
			Vue.component("counter", {
				template: "<div @click='handlerClick'>{{number}}</div>",
				data: function(){
					return {
						number: 0,
					}
				},
				methods: {
					handlerClick: function() {
						this.number++
						this.$emit("change")
					}
				}
				
			})
			/*Vue.component('row', {
				data: function() {
					return {
						content: 'this is a row'
					}
				},
				template: '<tr><td>{{content}}</td></tr>'
			})*/
			
			var vm = new Vue({
				el: "#root",
				data: {
					total: 0
				},
				methods: {
					/*handlerClick: function() {
						console.log(this.$refs.hello.innerHTML);
					}*/
					handlerChange: function() {
						this.total = this.$refs.one.number + this.$refs.two.number
					}
				}
			})
		</script>
	</body>
</html>
